<template>
  <div class="allSelect">
    <!-- 单选 -->
    <div v-if="form.type==1">
      <br />
      <div v-for="(item, index) in form.select_options" :key="index" class="single">
        <el-radio-group v-model="form.single_select_answer" class="radioItem">
          <el-radio :label="item.label" @change="rulesValidate('single_select_answer')">{{item.label}}</el-radio>
        </el-radio-group>
        <el-input v-model="item.text"></el-input>
        <div class="img-select">
          <!-- <uploadImg :value="imgSrc" @input="inputEvent"></uploadImg> -->
          <uploadImg v-model="item.image"></uploadImg>
        </div>
      </div>
    </div>

    <!-- 多选 -->
    <div v-else-if="form.type==2">
      <br />
      <div v-for="(item, index) in form.select_options" :key="index" class="single">
        <el-checkbox-group v-model="form.multiple_select_answer" class="radioItem">
          <el-checkbox :label="item.label" @change="rulesValidate('multiple_select_answer')">{{item.label}}</el-checkbox>
        </el-checkbox-group>
        <el-input v-model="item.text"></el-input>
        <div class="img-select">
          <!-- <uploadImg :value="imgSrc" @input="inputEvent"></uploadImg> -->
          <uploadImg v-model="item.image"></uploadImg>
        </div>
      </div>
    </div>

    <!-- 简答 -->
    <div v-else>
      <br>
      <el-input type="textarea" :rows="5" v-model="form.short_answer" @change="rulesValidate('short_answer')"></el-input>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/components/uploadImg.vue'
export default {
  props: ["form"],
  components: {
    uploadImg
  },

  data() {
    return {
      imageUrl: ''
    }
  },

  methods:{
    inputEvent(src){
      this.imageUrl = src
      // console.log(src);
    },

    rulesValidate(temp){
      this.$emit('validateItem', temp)
    }
  }
};
</script>

<style lang="less">
.allSelect {
  .single {
    display: flex;
    // justify-content: center;
    align-items: center;
    margin-left: 60px;
    padding-bottom: 8px
  }

  .img-select{
    width: 178px;
    height: 178px;
  }
}
</style>